import React from 'react';
import { Input } from '@alifd/next';

export default class Cell extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cellTitle: props.defaultTitle,
      editable: false,
      index: this.props.index,
      valueKey: this.props.valueKey,
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.defaultTitle !== this.state.cellTitle) {
      this.setState({
        cellTitle: nextProps.defaultTitle,
      });
    }
  }
      onKeyDown = (e) => {
        const { keyCode } = e;
        // Stop bubble up the events of keyUp, keyDown, keyLeft, and keyRight
        if (keyCode > 36 && keyCode < 41) {
          e.stopPropagation();
        }
      }

      onBlur = (e) => {
        const value = e.target.value;
        const index = this.state.index;
        if (value !== '') {
          this.setState({
            editable: false,
            cellTitle: value,
          });
        } else {
          this.setState({
            editable: false,
          });
        }

        this.props.Blur(value, index);
      }

      onDblClick = () => {
        console.log(1);
        this.setState({
          editable: true,
        }, () => {
          // alert(this.state.editable);
        });
      }

      render() {
        const { cellTitle, editable } = this.state;
        if (editable) {
          return <Input autoFocus defaultValue={cellTitle} onKeyDown={this.onKeyDown} onBlur={this.onBlur} style={{ width: '100%' }} />;
        }
        return <div onDoubleClick={this.onDblClick} style={{display:'flex',alignItems:'center', minWidth: '20px', minHeight: '20px', textAlign: 'center', lineHeight: '20px', cursor: 'text',verticalAlign:'middle' }}>{cellTitle}</div>;
      }
}
